Làm dòng chữ chạy bằng CSS

Một số trang web có dòng chạy thông báo dạng như tin nóng hay và bạn cũng muốn gắn cái đó vào blog của mình cho nó giống với một website thật thụ. Đặc biệt là blog của bạn bán hàng online thì nó lại càng cần thiết để bạn thông báo hàng mới về hay khuyến mãi….

Vậy làm cái dòng chạy chạy đó ra sao, dưới đây là những gì bạn cần để làm nó.

Bước 1:

Thêm vào trước ]]></b:skin> đoạn CSS dưới đây

/*----chu chay-----*/
.marquee {
 height: 50px; 
 overflow: hidden;
 position: relative;
}
.marquee p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%); 
 transform:translateX(100%);
 /* Apply animation to this element */ 
 -moz-animation: scroll-left 25s linear infinite;
 -webkit-animation: scroll-left 25s linear infinite;
 animation: scroll-left 25s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%);   
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}

Bước 2:

Gắn code chạy chữ bên dưới vào vị trí thích hợp mà bạn mong muốn

<div class="marquee">
<p>dong chu can chay cua ban... </p>
</div>

Bạn thay dòng chữ của bạn vào vị trí Dòng thông báo 1 và Dòng thông báo 2

Bonus: ngoài ra bạn có thể tham khảo thêm ở đường link sau: http://www.html.am/html-codes/marquees/